<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-form-item label="语言类型：">
                  <el-select v-model="from.code" placeholder="请选择" clearable>
                    <el-option v-for="item in options" :key="item.id" :label="item.languageName" :value="item.fileName">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="原语句：">
                  <el-input v-model="from.remarks" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="4" :xl="4" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <el-alert type="warning" :closable="false">
          <template slot="title">
            <p class="alert_title">页面语言</p>
            添加页面语言，添加完成之后状态码为中文文字，移动端页面使用 $t(`xxxx`)，js文件中使用 this.t(`xxxx`) 或者使用
            that.t(`xxxx`) 实现语言的切换<br />
            <br />
            <p class="alert_title">接口语言</p>
            添加接口语言，添加完成之后状态码为6位数字，接口返回提示信息时，直接返回对应的错误码即可实现语言的切换
          </template>
        </el-alert>
        <div class="btn_bt">
          <el-button class="mr10" size="small" icon="el-icon-circle-plus-outline" type="primary" @click="add()">添加语言</el-button>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        highlight-current-row>
        <el-table-column prop="id" label="编号" min-width="100" />
        <el-table-column prop="remarks" label="原语句" min-width="200" />
        <el-table-column prop="langExplain" label="对应语言翻译" min-width="200" />
        <el-table-column prop="languageName" label="语言类型" min-width="200" />
        <el-table-column label="操作" min-width="130" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
    <el-dialog :title="ruleForm.id?'修改语言类型':'新增语言类型'" :visible.sync="dialogVisible" width="600px"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="150px">
        <el-form-item label="需要翻译的语句：" prop="remarks">
          <div style="display: flex;justify-content: flex-start;align-items: center;"><el-input
              v-model="ruleForm.remarks"></el-input><el-button style="margin-left: 10px;" type="primary" size="small"
              @click="translate(ruleForm.remarks)">翻译</el-button></div>
        </el-form-item>
        <el-table border :data="ruleForm.listed" style="width: 100%">
          <el-table-column prop="languageName" label="语言类型">
          </el-table-column>
          <el-table-column label="对应语言翻译">
            <template slot-scope="scope">
              <el-input v-model="scope.row.langExplain"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    langtypeGetOption,
    langcodeExplainList,
    langcodeSave,
    langcodeTranslation,
    langcodeInfo,
    langcodeUpdate,
    langcodeDelete,
  } from '@/api/language'
  export default {
    name: 'info',
    data() {
      return {
        labelPosition: 'right',
        options: [],
        from: {
          code: '',
          remarks: '',
          page: 1,
          limit: 15,
        },
        loading: false,
        tableData: {
          data: [],
          total: 0
        },
        dialogVisible: false,
        ruleForm: {
          id: '',
          remarks: '',
          listed: []
        },
        rules: {
          remarks: [{
            required: true,
            message: '请输入需要翻译的语句',
            trigger: 'blur'
          }],
        }
      };
    },
    mounted() {
      langtypeGetOption().then(res => {
        console.log('语言全列表', res)
        this.options = res
        this.options.forEach(item => {
          if (item.isDefault == 1) {
            this.from.code = item.fileName
          }
        })
        this.getlist();
      }).catch(err => {
        console.log(err)
      })
    },
    methods: {
      search() {
        console.log(this.from)
        this.from.page = 1
        this.from.limit = 15
        this.getlist()
      },
      reset() {
        this.from = {
          code: '',
          remarks: '',
          page: 1,
          limit: 15,
        }
        this.getlist()
      },
      add() {
        this.ruleForm = {
          id: '',
          remarks: '',
          listed: []
        }
        this.dialogVisible = true
      },
      handleEdit(row) {
        console.log('编辑', row)
        langcodeInfo(row.id).then(res => {
          console.log('详情', res)
          this.ruleForm = {
            id: res.id,
            remarks: res.remarks,
            listed:res.listed
          }
          this.dialogVisible = true
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      close() {
        this.ruleForm = {
          id: '',
          remarks: '',
          listed: []
        }
        this.dialogVisible = false
      },
      translate(remarks) {
        console.log(remarks)
        let data = {
          remarks: remarks
        }
        langcodeTranslation(data).then(res => {
          console.log('语言翻译', res)
          this.ruleForm.listed = res
        }).catch(err => {
          console.log(err)
          this.$message.error(err)
        })
      },
      submit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            if (this.ruleForm.id) {
              console.log('编辑', this.ruleForm)
              if(this.ruleForm.listed.length == 0){
                return this.$message.error('请翻译')
              }
              let data = {
                id:this.ruleForm.id,
                listed:this.ruleForm.listed
              }
              langcodeUpdate(data).then(res => {
                console.log(res)
                this.close()
                this.$message.success('编辑成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            } else {
              console.log('新增', this.ruleForm)
              if(this.ruleForm.listed.length == 0){
                return this.$message.error('请翻译')
              }
              langcodeSave(this.ruleForm.listed).then(res => {
                console.log(res)
                this.close()
                this.$message.success('新增成功')
                this.getlist()
              }).catch(err => {
                console.log(err)
                this.$message.error(err)
              })
            }
          } else {
            this.$message.error('请填写完整信息')
          }
        });
      },
      handleDel(row) {
        this.$confirm('确认删除？')
          .then(_ => {
            console.log('删除', row)
            langcodeDelete([row.id]).then(res => {
              console.log(res)
              this.$message.success('删除成功')
              this.getlist()
            }).catch(err => {
              console.log(err)
              this.$message.error(err)
            })
          })
          .catch(_ => {});
      },
      getlist() {
        this.loading = true
        langcodeExplainList(this.from).then(res => {
          console.log(res)
          this.tableData.data = res.list
          this.tableData.total = res.total
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
      },
      pageChange(page) {
        this.from.page = page
        this.getlist()
      },
      handleSizeChange(val) {
        this.from.limit = val
        this.getlist()
      }
    },
  };
</script>
<style scoped lang="scss">
  .btn_bt {
    border-top: 1px dashed #ccc;
    padding-top: 20px;
  }
</style>
